<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div class="header flex-justify-between">
        <div class="bnts flex-align-center">
          <button class="btn mr5 btn-bg1">导出供应商</button>
          <button class="btn btn-bg5" @click="goList">返回列表</button>
        </div>
        <div class="search flex-align-center">
          <el-select v-model="value" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value"
          /></el-select>
          <el-select v-model="value" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value"
          /></el-select>
          <el-input v-model="input" placeholder="检索" class="input-with-select">
            <template #prepend>
              <el-select class="w100" v-model="select" placeholder="选择">
                <el-option label="工单编号" value="1" />
                <el-option label="工单编号" value="2" />
                <el-option label="工单编号" value="3" />
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
      <div class="table">
        <el-table border stripe resizable :data="tableData">
          <el-table-column show-overflow-tooltip prop="date" label="供应商名称" />
          <el-table-column show-overflow-tooltip prop="coderNub" label="供应商等级" width="150" />
          <el-table-column show-overflow-tooltip prop="count" label="供应商分类" width="150 " />
          <el-table-column show-overflow-tooltip prop="city" label="型号" width="100" />
          <el-table-column show-overflow-tooltip prop="count" label="规格" width="100" />
          <el-table-column show-overflow-tooltip prop="count" label="库存" width="100" />
          <el-table-column show-overflow-tooltip prop="count" label="默认仓库" width="150" />
          <el-table-column show-overflow-tooltip prop="city" label="最后更新时间" width="170" />
          <el-table-column fixed="right" label="操作" width="190">
            <template #default="scope">
              <div class="btns flex-justify-between">
                <button class="btn-table bgColor3" @click="reStoresup(scope.$index)">恢复</button>
                <button class="btn-table bgColor5" @click="deleSup(scope.$index)">删除</button>
                <button class="btn-table bgColor1" @click="toSparelist(scope.$index)">配件</button>
                <button class="btn-table bgColor2">详细</button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <div class="pagina">
          <Pagination @size-change="getSizeList" @current-change="getNumList"
        /></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'
  import { ElMessageBox } from 'element-plus'
  import { useRouter } from 'vue-router'
  import { Search } from '@element-plus/icons-vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.recycleBinSet,
  })

  const router = useRouter()
  const input = ref('')
  const value = ref('')
  const select = ref('')

  // 返回列表
  const goList = () => {
    router.go(-1)
  }

  // 查看配件
  const toSparelist = (n: number) => {
    router.push('/busic/base/spareman')
  }

  // 恢复供应商
  const reStoresup = (n: number) => {
    ElMessageBox.confirm('是否恢复该供应商?', '提示', {
      draggable: true,
      cancelButtonText: '否',
      confirmButtonText: '是',
    })
      .then(() => {})
      .catch(() => {})
  }

  // 删除供应商
  const deleSup = (n: number) => {
    ElMessageBox.confirm('是否删除该供应商?', '提示', {
      draggable: true,
      cancelButtonText: '否',
      confirmButtonText: '是',
    })
      .then(() => {})
      .catch(() => {})
  }

  // 分页改变时
  const getSizeList = (n: any) => {}

  // 页码改变时
  const getNumList = (n: any) => {}

  const options = [
    {
      value: '全部类型',
    },
    {
      value: '全部品牌',
    },
    {
      value: '全部分类',
    },
  ]

  const tableData = [
    {
      date: 'LS23050905092127718284',
      name: 'IN2306091736308883',
      coderNub: '233',
      count: '0',
      city: '深圳市南山区维修店',
      address: '2023-04-26 11:31:01',
      zip: 'CA 90036',
      tag: 'Home',
      state: '启用',
    },
    {
      date: '20230602590500824',
      state: '不启用',
      name: '2016-05-02',
      count: '0',
      coderNub: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      count: '0',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      count: '0',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
